<template>
  <div class="page-box h100 display-flex dfgfdgdftr">
    <div class="zdcfxzcvdsert">
      <p class="title-label">分类列表</p>
      <div class="mt20">
        <div v-for="sd in zxcvfd" class="display-flex btm pt10 pm10 sz" @click="kjdcsdfd(sd)">
          <div class="flex-1 z6 fz16 vertical-center tl" :class="sd.cls=='act'?'ls':''">
            {{ sd.name }}
          </div>
          <div class="vertical-center">
            <div>
              <n-tooltip trigger="hover" v-if="sd.isshow==1">
                <template #trigger>
                  <i class="iconfont dx-xianshi_huaban ls fz20" @click.stop="xzcxzsdfdfdf(sd.id,2)"></i>
                </template>
                点击隐藏分类
              </n-tooltip>

              <n-tooltip trigger="hover" v-if="sd.isshow==2">
                <template #trigger>
                  <i class="iconfont dx-in_biyan red fz20" @click.stop="xzcxzsdfdfdf(sd.id,1)"></i>
                </template>
                点击显示分类
              </n-tooltip>

              <n-tooltip trigger="hover">
                <template #trigger>
                  <i class="iconfont dx-edit ls fz20 ml10" @click.stop="jzxcdfd(sd)"></i>
                </template>
                点击编辑分类
              </n-tooltip>

              <n-tooltip trigger="hover">
                <template #trigger>
                  <i class="iconfont dx-close red fz20 ml10" @click.stop="jkcfvdsf(sd)"></i>
                </template>
                点击删除分类
              </n-tooltip>
            </div>
          </div>
        </div>
      </div>

      <div class="cen mt20">
        <n-button type="info" @click="tinajsdr"> +添加分类 </n-button>
      </div>
    </div>
    <div class="flex-1 blm pl10 ml10">
      <!-- <list :zfleix="kxcdfds" ref="zisddrttrt"></list> -->
      <router-view></router-view>
      <!-- <n-tabs type="line">
        <n-tab-pane name="list" tab="自定义分类列表">
          
        </n-tab-pane>
        <n-tab-pane
          :name="item.id"
          :tab="item.sxname"
          v-for="(item, idx) in lister"
        >
          <zd :id="item.id" @saveSuccess="saveSuccess"></zd>
        </n-tab-pane>
      </n-tabs> -->

      <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
        <template #header>
          <div>{{ isxiuga?'修改':'添加' }}分类</div>
        </template>
        <div>
          <div>
            <n-input
              v-model:value="from.name"
              type="text"
              placeholder="请输入分类名称"
            />
          </div>
          <div class="mt10">
            <p>上传Kv图</p>
            <div class="mt10">
              <div
                class="headPortrait-box vertical-center sz cxvxvdrdtere"
                @click="showModalxcert = true"
              >
                <img :src="from.kv" v-if="from.kv" />
                <i class="iconfont dx-tupian fz30" v-else> </i>
              </div>
            </div>
          </div>
        </div>
        <template #action>
          <div class="tr">
            <n-button type="info" @click="xzcxzrtydr">{{ isxiuga?'修改':'添加' }}  </n-button>
            <n-button @click="showModal = false" class="ml10"> 关闭 </n-button>
          </div>
        </template>
      </n-modal>

      <n-modal
        v-model:show="showModalxcert"
        preset="card"
        class="Stock-diagnosis"
      >
        <template #header>
          <div>上传Kv图</div>
        </template>
        <div>
          <photoGallery @getImg="getImg" types="先健kv"> </photoGallery>
        </div>
        <template #action>
          <div class="tr">
            <n-button type="info" @click="kjxzcvsfdf"> 确认 </n-button>
            <n-button @click="showModalxcert = false" class="ml10">
              关闭
            </n-button>
          </div>
        </template>
      </n-modal>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, computed } from "vue";
import {
  dxget,
  dxpost,
  qurl,
  hf,
  transferTimeYMD,
  callBack,
  dialog,
  dxdel
} from "../../../util/index";
import zd from "../../dxgj/components/zd.vue";
import photoGallery from "../../../components/util/photoGallery";
import list from "./list.vue";
import { NButton } from "naive-ui";
const lister = ref();
const zxcvfd = ref([]);
const showModal = ref(false);
const showModalxcert = ref(false);
const cz = qurl();
const kxcdfds = ref()
const defaultvalue = ref();
defaultvalue.value = [381, 382];
const isxiuga = ref(false);
const zisddrttrt = ref()
const from = ref({
  name: "",
  kv: "",
});
let kjxcsdf = "";
const getImg = (img) => {
  kjxcsdf = img;
};
const kjxzcvsfdf = () => {
  from.value.kv = kjxcsdf;
  showModalxcert.value = false;
};
const tinajsdr = async()=>{
  isxiuga.value = false
  from.value.kv =''
  from.value.name = ''
  showModal.value = true
}

const hgaseer = async () => {
from.value.kv =''
from.value.name = ''
  const { data }: any = await dxget("xjyx/api/gethuodsse");
  data.map(a=>[
    a.cls=''
  ])
  zxcvfd.value = data;
};

const kjdcsdfd= (data)=>{
  zxcvfd.value.map(a=>{
    a.cls = ''
  })
  data.cls='act'
  // kxcdfds.value = data.id
  // zisddrttrt.value.initbas()
  hf('xsdflist?typesder='+ data.id)
}

const initsd  = async () => {
  await hgaseer();

if(cz.typesder){
  zxcvfd.value.map(a=>{
  if(a.id==cz.typesder){
    a.cls='act'
  }
})
}else{
  hf('xsdflist?typesder='+ zxcvfd.value[0].id)
}

  
}
initsd()

const jkcfvdsf =async (data) => {
  let statics: any = await dialog("此操作将永久删除, 是否继续?");
    if (statics == 1) {
      await dxpost("xjyx/api/sanchusd",{id:data.id});
      hgaseer();
      window.$message.success("删除成功");
    }
}


const xzcxzsdfdfdf= async (id,isshow) => {
  await dxpost("xjyx/api/xiugaihuodsse", {
    id,
    isshow
  });
  window.$message.success("操作成功");
  hgaseer();
}

const xzcxzrtydr = async () => {
  if (!from.value.name) {
    window.$message.error("请填写分类名称");
    return;
  }
  if (!from.value.kv) {
    window.$message.error("请上传Kv图");
    return;
  }
  
  if(isxiuga.value){
    await dxpost("xjyx/api/xiugaihuodsse", from.value);
    window.$message.success("修改成功");
  }
  if(!isxiuga.value){
    delete from.value['id']
    await dxpost("xjyx/api/addhuodssexwer", from.value);
    window.$message.success("添加成功");
  }
 
  showModal.value = false;
  
  hgaseer();
};

const jzxcdfd = async (wdata)=>{
  showModal.value = true;
  isxiuga.value = true
  const {data}:any= await dxget("xjyx/api/dangegethuodsse",{id:wdata.id});
  from.value = data;
 
}

const roid = localStorage.id;
const initData = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd/getzdList", {
    ids: "381,382",
    roleId: roid,
  });
  lister.value = data;
};
initData();
const saveSuccess = () => {
  window.$message.success("保存成功");
};
</script>
<style scoped>
.dfgfdgdftr {
  overflow: auto;
}
.zdcfxzcvdsert {
  width: 240px;
}
.cxvxvdrdtere {
  width: 100% !important;
  height: 150px !important;
}
</style>
